import React, { Component } from 'react'
import { Table, Tag, Space, Button, Modal } from 'antd';
import { Form, Input } from 'antd';
import { bindActionCreators } from "redux"
import { connect } from "react-redux"
import Formmodel from '../components/formmodel';
import * as action from "../action/tableIndex"
import Dirlog from '../components/dirlog'; // 引入封装的弹唱组件
import Fenye from '../components/fenye';
import {debounce} from "lodash"

class Testpaperman extends Component {
  state = {
    index:1,
    title: "新增",
    edititem:{},
    editindex:0,
    isModalVisible:false,
    sonshow: false, // 用于控制子弹窗组件的显示与隐藏
    delIndex: 0, // 用于控制删除第几条
    columns: [
      {
        title: 'Name',
        dataIndex: 'name1',
        key: 'name',
        render: text => <a>{text}</a>,
      },
      {
        title: 'Age',
        dataIndex: 'date',
        key: 'age',
      },
      {
        title: 'Address',
        dataIndex: 'address',
        key: 'address',
      },

      {
        title: 'Action',
        key: 'action',
        render: (text, record, index) => (
          <Space size="middle">
            <a onClick={this.editshow.bind(this, record, index)}>编辑</a>
            <a onClick={debounce(this.delfn.bind(this, index),2000) }>Delete</a>
          </Space>
        ),
      },
    ]
  }
  delfn(index) {  // 删除
    console.log(index)
    this.setState({
      sonshow: true
    })
  }
  editshow(item, index) { // 编辑
    this.setState({
      isModalVisible: true,
      title: "编辑",
      edititem:item,
      editindex:index
    })
  

  }
  componentDidMount() {
    this.props.getList1()
  }
  showModeladd() { // 点击新增弹窗打开的方法
    this.setState({
      isModalVisible: true,
      title:"新增"
    })

  }
  
 // 父组件给子组件传一个关闭弹窗的方法
 closefn = (data)=>{
      this.setState({
        isModalVisible:data
      })
 }
  fasendsonfn = (data) => { // 父组件给子组件传递一个函数，用于子组件修改父组件的弹框显示的布尔值
    this.setState({
      sonshow: data
    })
  }
  changePagefn = (data)=>{
    this.setState({
      index:data
    })
  }
  render() {
    return (
      <div className='tablewarp'>
        <Button type="primary" onClick={this.showModeladd.bind(this)}>新增</Button>
        <Table columns={this.state.columns} dataSource={this.props.arr.slice((this.state.index-1)*5,this.state.index*5)}  pagination={false}/>
        {/* 用于新增得弹框 */}
     
        <Formmodel title = {this.state.title} isModalVisible = {this.state.isModalVisible} closefn = {this.closefn} eidtitem={this.state.edititem} editindex={this.state.editindex}></Formmodel>
        {/* 分页组件 */}
        <Fenye changefn = {this.changePagefn}></Fenye>

        {/* 引入的弹框组件 */}
        <Dirlog ishow={this.state.sonshow} delIndex={this.state.delIndex} delfn={this.fasendsonfn}></Dirlog>
        

      </div>
    )
  }
}
let mapStateToprops = (state) => {
  return {
    ...state.tablereducer
  }
}
let mapDsipatchToProps = (dispatch) => bindActionCreators(action, dispatch)


export default connect(mapStateToprops, mapDsipatchToProps)(Testpaperman)